<template>
  <div class="textarea-input flex-item" style="position: relative">

    <n-input @keydown.enter="enterHandle" @update:value="changeValue" ref="inputRef" v-model:value="component.content"
      :type="type" :rows="4" :maxlength="textRules.max_length" :show-count="true" :count-graphemes="count"
      placeholder="请输入广告文案">
    </n-input>
    <!-- <div class="flex input-tool" style="
                  align-items: center;
                  justify-content: flex-end;
                  right: 0;
                  bottom: -35px;
                "> -->
    <!-- <x-button v-if="getProps.params.copy_tool === '文案助手'" :text="true" @click="onShowTextTools">文案助手</x-button> -->
    <!-- <n-divider v-if="getProps.params.copy_tool === '文案助手'" vertical /> -->
    <!-- <n-popover class="m-popper-emoji">
        <template #trigger>
          <x-button :text="true">表情</x-button>
        </template>
<ul>
  <template v-for="(item, index) in emojiList" :key="index">
            <li @click="insertEmoji(item, isTextarea ? 'textarea' : 'input')">
              <n-image :src="emojiPic(item)" preview-disabled />
            </li>
          </template>
</ul>
</n-popover> -->
    <!-- <n-divider vertical /> -->
    <!-- <div>
        <span class="count-inner">{{ count }}/{{ textRules.max_length }}</span>
      </div> -->
    <!-- </div> -->
  </div>

</template>
<script setup lang="ts">
import { XLayoutMain, XDataTable, XButton, XForm } from '@/components'
import { useRoute, useRouter } from 'vue-router'
import { computed, h, onMounted, reactive, ref, VNode, watch, toRef, defineEmits, nextTick } from 'vue'
import { EMOJI_UNICODES } from '@/utils/emoji'
// media Update Code ok
import TextComponent from '@/store/modules/adv/component/text'
import { Creative } from '@/store/modules/adv/creativite';
import { count } from '@/utils/text';
const message = useMessage()
import {
  NCard,
  NDivider,
  NModal,
  NInput,
  NImage,
  NPopover,
  useMessage,
  NSelect,
  NIcon,
  NText,
  NFormItem,
  NRadioGroup,
  NRadio
} from 'naive-ui'
import { useStore } from '@/store'
const store = useStore();
const emit = defineEmits(['change']);

const props = withDefaults(defineProps<{
  component: TextComponent
  path: Array<any>,
  type: string
}>(), {
  type: 'textarea'
});

const getProps = reactive(props);


const textRules = computed(() => {
  if (props.component.children) {
    const content = (props.component.children['content'] || {}) as any;
    return content.restriction ? (content.restriction.text_restriction || {}) : {}
  }
  return props.component.restriction ? (props.component.restriction.text_restriction || {}) : {};
})

function enterHandle(e) {

  if (component.value.content.split(/\r|\n|\n\r/g).length >= 4) {
    e.preventDefault();
  }
}

function calcTextCount(text: string,) {
  const len = 0
  let t = 0
  const key = text.match(/\{\{(.+?)\}\}/g)
  const emoji = text.match(/\[(.+?)\]/g)
  let content = text.replace(/\{\{(.+?)\}\}/g, '');
  content = content.replace(/\[(.+?)\]/g, '')
  // 支持表情
  // if (text.expression) {
  //   content = content.replace(/\[(.+?)\]/g, '')
  // }
  for (let a = content.length, n = -1, r = 0; r < a; r++) {
    n = content.charCodeAt(r)
    t += n >= 0 && n <= 128 ? 0.5 : 1
  }
  // 计算动态词包长度
  if (key && key.length) {
    key.forEach((item) => {
      switch (item) {
        case '{{city}}':
          t += 4
          break
        case '{{gender}}':
          t += 2
          break
        case '{{day}}':
          t += 6
          break
        case '{{week}}':
          t += 3
          break
      }
    })
  }
  if (emoji && emoji.length) {
    t += emoji.length
  }
  return len + Math.ceil(t)

}

function countGraphemes(text: any) {
  return calcTextCount(text)
}

function changeValue(v: any) {

  store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
    path: props.path,
    key: 'content',
    value: v
  });

  nextTick(() => {
    emit('change');
  })
}




const component = toRef<any, any>(props, 'component');
//  content: component.value.content || '',
// type: component.value.type || [],
// display_content: component.value.display_content || '',
// console.log(component.value.content, 'component.value.content')
const form = reactive({
  content: (component.value.content || '')
});



watch(form, () => {
  // store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
  //   path: ['marketComponents', props.component.type],
  //   key: 'value',
  //   value: Object.assign({}, form)
  // })
})


</script>


<style scoped lang="scss">
.textarea-input {
  position: relative;
  max-width: 480px;

  .is-textarea {
    .count-inner {
      font-size: 12px;
      color: #a4a4a4;
      line-height: 1;
      padding: 0 5px;
    }
  }
}

.input-tool {
  border: 1px solid rgb(224, 224, 230);
  border-top: none;
  margin-top: -3px;
  padding: 6px 6px;
  padding-top: 9px;
  border-radius: 0 0 4px 4px;
}

.m-popper-emoji {

  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  ul {
    display: flex;
    flex-wrap: wrap;
    width: 260px;
  }

  li {
    width: 26px;
    height: 26px;
    overflow: hidden;
    padding: 2px;
    cursor: pointer;

    &:hover {
      background-color: #ddd;
    }
  }
}
</style>
